<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
		<view>
			<view class="u-flex u-row-between u-m-l-32 u-m-r-32">
				<view class=""><text class="u-font-36" style="font-weight: 600;">我的银行卡</text><text
						class="u-font-26 u-tips-color">（共{{list.length}}张）</text></view>
				<navigator url="/pages/wallet/bank-add/bank-add" class="btn-add" hover-class="u-hover-class">
					<image src="../static/icon-add-small.png" style="width: 16rpx;height: 16rpx;margin-right: 8rpx;">
					</image>
					<text>绑定新卡</text>
				</navigator>
			</view>
			<navigator :url="`/pages/wallet/bank-details/bank-details?cardNo=${item.cardNo}`"
				v-for="(item,index) in list" :key="index" class="item-area">
				<image src="../static/card-bg.png" class="card-bg"></image>
				<image :src="item.bankImage" mode="widthFix" class="icon-bank"></image>
				<view class="u-flex-1 u-rela">
					<view class="u-font-30">{{item.bankName}}</view>
					<view class="u-font-24 type">储蓄卡</view>
					<view class="card-num">{{ numFormat(item.cardNo)}}</view>
				</view>
			</navigator>
		</view>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				upOption: { empty: { tip: '暂无相关数据' } },
				userinfo: JSON.parse(uni.getStorageSync('userinfo'))
			};
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll()
			this.canReset = true
		},
		methods: {
			async upCallback(opts) {
				let { num: page, size } = opts
				let [err, res] = await uni.request({
					url: this.baseUrl + '/web/bank/list',
					method: 'POST',
					dataType: 'json',
					data: {
						ormtb410id: this.userinfo.ORMTB410ID, //二级客户ID
					},
				});
				if (res.data.code === 0) {
					let list = res.data.data
					this.list = list
					this.mescroll.endBySize(list.length, list.length);
				}
			},
			numFormat(str) {
				var reg = /^(\d{4})\d+(\d{4})$/;
				return str = str.replace(reg, "$1 **** **** $2");
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.item-area {
		height: 236rpx;
		border-radius: 8rpx;
		margin: 32rpx;
		position: relative;
		color: #FFFFFF;
		padding-top: 32rpx;
		display: flex;

		.icon-bank {
			width: 100rpx;
			margin-right: 16rpx;
			position: relative;
			margin: 0 32rpx;
		}

		.card-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.card-num {
			font-size: 48rpx;
			font-weight: bold;
		}

		.type {
			opacity: 0.5;
			margin-top: 4rpx;
			margin-bottom: 32rpx;
		}
	}

	.btn-add {
		padding: 10rpx 16rpx;
		border-radius: 24rpx;
		border: 2rpx solid #FFB902;
		font-size: 20rpx;
		color: #FFB902;
	}
</style>
